<template>
  <el-form
    class="resume-edit"
    ref="form"
    :model="formData"
    :rules="rules"
    :label-suffix="$t('tip.colon')"
    label-width="120px"
    label-position="top"
    size="small"
  >
    <div class="resume-edit-title">
      编辑专业技能<span
        class="resume-edit-delete"
        type="primary"
        @click="handleRemove"
        v-if="formData.id"
        ><SvgIcon name="shanchu" />删除</span
      >
    </div>
    <el-form-item prop="skillName" :label="$t('resume.skillName')">
      <el-input v-model="formData.skillName" :placeholder="$tInput()" />
    </el-form-item>
    <el-row :gutter="77">
      <el-col :span="12">
        <el-form-item prop="months" :label="$t('resume.months')">
          <el-input v-model="formData.months" :placeholder="$tInput()"
            ><template slot="append">月</template>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="proficiency" :label="$t('resume.proficiency')">
          <el-select v-model="formData.proficiency" :placeholder="$tSelect('')">
            <el-option
              v-for="item in dictData['proficiency']"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="resume-edit-btns">
      <el-button
        size="small"
        type="primary"
        :loading="submiting"
        @click="submitForm"
        >保存并更新</el-button
      >
      <el-button size="small" type="info" @click="$emit('edit')">{{
        $t('action.cancel')
      }}</el-button>
    </div>
  </el-form>
</template>

<script>
import { dictMixin } from 'mixins'
import { createSkill, updateSkill, deleteSkill } from 'services/student/resume'
export default {
  name: 'ResumeEducationEdit',
  mixins: [dictMixin],
  dicts: ['proficiency'],
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formData: {},
      submiting: false
    }
  },
  computed: {
    rules() {
      return {
        skillName: this.$rule('resume.skillName', {
          required: true
        }),
        months: this.$rule('resume.months', {
          required: true
        }),
        proficiency: this.$rule('resume.proficiency', {
          required: true
        })
      }
    }
  },
  methods: {
    async submitForm() {
      try {
        await this.$refs.form.validate()
        this.submiting = true
        const service = this.formData.id ? updateSkill : createSkill
        await service(this.formData)
        this.$emit('edit')
        this.$bus.$emit('resume-update')
      } catch {
      } finally {
        this.submiting = false
      }
    },
    async handleRemove() {
      try {
        await this.$confirm(
          this.$t('tip.removeTip'),
          this.$t('tip.systemTip'),
          {
            type: 'warning'
          }
        )
        const ids = [this.formData.id]
        await deleteSkill(ids)
        this.$emit('edit')
        this.$bus.$emit('resume-update')
      } catch {}
    }
  },
  created() {
    this.formData = { ...this.data }
  }
}
</script>
